<template>
  <div class="footer" style="z-index: 3000">
    <div>
      <transition name="el-fade-in" style="height: 300px">
        <div v-show="drawer" class="transition-box">
          <span
            class="clear"
            @click="clear()"
            v-show="$store.state.priceAbout.cart.length !== 0"
            >清空列表</span
          >
          <ul>
            <li
              v-for="(item, index) of $store.state.priceAbout.cart"
              :key="index"
              v-show="item.num !== 0"
            >
              <span>{{ item.name }}</span>
              <span>数量：{{ item.num }}</span>
              <span>金额：{{ item.price * item.num }}</span>
              <span
                ><i
                  class="el-icon-remove-outline"
                  @click="remove(item, index)"
                ></i
              ></span>
            </li>
          </ul>
        </div>
      </transition>
    </div>
    <div
      v-show="$store.state.priceAbout.cart.length == 0"
      class="shopCart cart1"
      @click="drawer = !drawer"
      type="primary"
      style="margin-left: 16px; z-index: 3000"
    >
      <i class="el-icon-shopping-cart-2"></i>
    </div>
    <div
      v-show="$store.state.priceAbout.cart.length !== 0"
      class="shopCart cart2"
      @click="drawer = !drawer"
      type="primary"
      style="margin-left: 16px; z-index: 3000"
    >
      <span>{{ $store.state.priceAbout.cart.length }}</span>
      <i class="el-icon-shopping-cart-2"></i>
    </div>
    <div class="money">￥{{ money }}</div>
    <div class="payinfo">
      另外还需支付￥{{ $store.state.getDataAbout.data.seller.deliveryPrice }}元
    </div>
    <div class="btn jiesuan" v-show="money == 0">￥10元起送</div>
    <div class="btn jiesuan" v-show="money < 10 && money > 0">
      ￥还差{{ 10 - money }}元
    </div>
    <div
      class="btn jiesuan c"
      v-show="money >= 10"
      style="background: rgb(109 213 137)"
      @click="calculate()"
    >
      去结算
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      drawer: false,
    };
  },
  computed: {
    money() {
      let p = 0;
      this.$store.state.priceAbout.cart.forEach((element) => {
        p += element.price * element.num;
      });
      return p;
    },
  },
  methods: {
    calculate() {
      console.log("结算了");
    },
    remove(item, index) {
      this.$store.commit("priceAbout/removeCart", index);
      this.$store.commit("getDataAbout/deleteNum", item.id);
    },
    clear() {
      this.$confirm("此操作将清空购物车，确认继续吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "清空列表成功!",
          });

          this.$store.commit("priceAbout/clearCart");
          this.$store.commit("getDataAbout/clearNum");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空",
          });
        });
    },
  },
};
</script>

<style scoped>
.footer {
  z-index: 3000;
  font-size: 12px;
  font-weight: 600;
  color: rgb(155, 155, 155);
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  background: rgb(31, 31, 31);
  display: flex;
}
.btn {
  background: rgb(77, 77, 77);
  width: 90px;
  right: 0;
  text-align: center;
}
.shopCart {
  width: 50px;
  border-radius: 50%;
  bottom: 0;
  left: 10px;
  position: relative;
}
.cart1 {
  background: rgb(77, 77, 77);
}
.cart2 {
  color: #fff;
  background: rgb(96, 112, 202);
}

.shopCart i {
  font-size: 30px;
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.shopCart span {
  background: rgb(255, 71, 25);
  font-size: 13px;
  position: absolute;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 20px;
  text-align: center;
  right: -3px;
  top: -3px;
}
.money,
.payinfo,
.shopCart,
.btn {
  height: 50px;
  position: absolute;
}
.money {
  width: 90px;
  left: 82px;
}
.payinfo {
  width: 120px;
  left: 125px;
}
.jiesuan {
  height: 40px;
}
.transition-box {
  width: 100%;
  border-radius: 4px;
  background: rgb(243, 240, 247);
  /* text-align: center; */
  color: rgb(68, 68, 68);
  box-sizing: border-box;
  position: fixed;
  bottom: 40px;
}
.clear {
  width: 100%;
  padding-right: 20px;
  color: blue;
  text-align: right;
  display: inline-block;
  border-bottom: 1px dotted #aaa;
}
ul {
  max-height: 280px;
  overflow: auto;
}
.transition-box li {
  padding-left: 10px;
  /* background: cadetblue; */
  display: flex;
  height: 40px;
}
.transition-box li span:nth-child(1) {
  width: 57%;
  overflow: hidden;
}
.transition-box li span:nth-child(2) {
  width: 20%;
}
.transition-box li span:nth-child(3) {
  width: 20%;
}
.transition-box li span:nth-child(4) {
  width: 8%;
}
.footer .c {
  color: #333;
}
</style>
<style>
.el-popup-parent--hidden .el-message-box__wrapper .el-message-box {
  width: 305px !important;
}
</style>